<template>
	<view class="index">
		<view class="top">
			<view :class="activeIndex == index ? 'item active' : 'item'" v-for="(item, index) in typeList" :key="index" @click="changeType(item, index)">
				<text>{{ item.name }}</text>
			</view>
		</view>
		<view class="itemBox" v-if="orderList.length > 0">
			<view class="item" v-for="(item, index) in orderList" :key="index">
				<view class="title">
					<view class="shop-name">
						<view class="shop-icon"><text class="iconfontPT iconmendian color-red"></text></view>
						<text class="shop-txt">{{ item.store_title }}</text>
					</view>
					<text class="shop-status">{{ item.state == 1 ? '未核销' : '已核销' }}</text>
				</view>
				<view class="content">
					<view class="content__img"><image :src="host + item.img" mode="aspectFill"></image></view>
					<view class="info">
						<view class="name u-line-1">{{ item.order_title }}</view>
						<view class="money">
							<text class="price-currency">￥</text>
							{{ item.pay_money.toFixed(2) }}
						</view>
					</view>
				</view>
				<view class="totalmoney">
					<text class="ptice__pre">合计：</text>
					<text class="price-currency">￥</text>
					<text>{{ item.total_money.toFixed(2) }}</text>
				</view>
				<view class="gotoinfo" @click="orderinfo(item)">订单详情</view>
			</view>
		</view>
		<view v-else><noData texts="暂无订单信息"></noData></view>
	</view>
</template>

<script>
import { myOrders } from '../../../apis/shop/api.js';
import noData from '../../components/public/no-data.vue';
export default {
	data() {
		return {
			typeList: [
				{
					name: '未核销',
					val: 1
				},
				{
					name: '已核销',
					val: 2
				}
			],
			activeIndex: 0,
			store_id: '',
			token: '',
			state: 1,
			orderList: []
		};
	},
	computed:{
		host(){
			return this.$baseHost.car
		}
	},
	onLoad() {
		this.store_id = uni.getStorageSync('store_id');
		this.token = uni.getStorageSync('token');
		this.getList();
	},
	methods: {
		changeType(item, index) {
			this.activeIndex = index;
			this.state = item.val;
			this.getList();
		},
		getList() {
			let that = this;
			myOrders({
				store_id: that.store_id,
				token: that.token,
				state: that.state
			}).then(res => {
				if (res.code == 1) {
					const orders = res.data.orders || [];
					that.orderList = orders;
				}
			});
		},
		orderinfo(item) {
			uni.navigateTo({
				url: '/pages/shopmanager/service/orderinfo?order_no=' + item.order_no
			});
		}
	}
};
</script>

<style lang="less">
page {
	background-color: #f8f8f8;
}
.index {
	padding-top: 88rpx;
}

.top {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	display: flex;
	background-color: #fff;
	.item {
		flex: 1;
		height: ;
		text-align: center;
		line-height: 68rpx;

		&.active {
			text {
				color: #e41805;
				font-weight: bold;
				position: relative;

				&::after {
					content: '';
					position: absolute;
					left: calc(50% - 18rpx);
					width: 36rpx;
					bottom: -15rpx;
					height: 4rpx;
					background-color: #e41805;
				}
			}
		}

		text {
			font-size: 30rpx;
			color: #333;
			font-weight: 500;
		}
	}
}

.itemBox {
	margin-top: 20rpx;
	.item {
		padding: 30rpx;
		margin-bottom: 20rpx;
		// padding-bottom: 30rpx;
		background-color: #fff;
		&::after {
			content: '';
			display: block;
			height: 0;
			overflow: hidden;
			clear: both;
		}
		.title {
			// line-height: 88rpx;
			border-bottom: 1rpx solid rgba(203, 203, 203, 0.5);
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 30rpx;

			.shop-name {
				display: flex;
				align-items: center;

				.shop-icon {
					background-color: #e41805;
					border-radius: 50%;
					padding: 10rpx;
					margin-right: 9rpx;
					height: 36rpx;
					width: 36rpx;
				}

				.shop-txt {
					font-size: 30rpx;
					color: #333333;
					font-weight: bold;
				}

				.color-red {
					color: #fff;
				}
			}

			.shop-status {
				font-weight: normal;
				color: #e41805;
				font-size: 28rpx;
				font-weight: 500;
			}
		}
		.content {
			border-bottom: 1rpx solid rgba(203, 203, 203, 0.5);
			padding: 30rpx 0;

			display: flex;
			align-items: center;

			&__img {
				width: 120rpx;
				height: 120rpx;
				border-radius: 10rpx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.info {
				margin-left: 20rpx;

				.name {
					font-size: 28rpx;
					color: #333;
					font-weight: bold;
				}
				.money {
					font-size: 24rpx;
					color: #e41805;
					margin-top: 15rpx;
					font-weight: 500;
				}
			}
		}
		.totalmoney {
			border-bottom: 1rpx solid rgba(203, 203, 203, 0.5);
			text-align: right;
			font-size: 30rpx;
			color: #e41805;
			line-height: 86rpx;
			font-weight: bold;

			.ptice__pre {
				color: #333;
				font-size: 30rpx;
			}
		}
		.gotoinfo {
			float: right;
			width: 172rpx;
			text-align: center;
			height: 58rpx;
			border: 1rpx solid #ccc;
			border-radius: 58rpx;
			color: #333;
			font-size: 26rpx;
			line-height: 58rpx;
			margin-top: 30rpx;
		}
	}

	.price-currency {
		font-size: 20rpx;
	}
}
</style>
